<template>
  <div class="llpbDialog">
    <el-dialog title="冷料配比" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
      :before-close="doClose" width="1000px">
      <div>
        <el-form ref="editForm" :model="form" :rules="rules" label-width="100px" class="myForm" size="small"
          v-loading="loading">
          <el-row :gutter="0">
            <el-col :span="12">
              <el-form-item label="骨料1" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="gravel1Name">
                    <el-select v-model="form.gravel1Name" placeholder="骨料1名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltGravelColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="gravel1">
                    <el-input-number placeholder="骨料1占比" :max="100" v-model="form.gravel1" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="骨料2" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="gravel2Name">
                    <el-select v-model="form.gravel2Name" placeholder="骨料2名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltGravelColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="gravel2">
                    <el-input-number placeholder="骨料2占比" :max="100" v-model="form.gravel2" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="骨料3" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="gravel3Name">
                    <el-select v-model="form.gravel3Name" placeholder="骨料3名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltGravelColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="gravel3">
                    <el-input-number placeholder="骨料3占比" :max="100" v-model="form.gravel3" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="骨料4" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="gravel4Name">
                    <el-select v-model="form.gravel4Name" placeholder="骨料4名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltGravelColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="gravel4">
                    <el-input-number placeholder="骨料4占比" :max="100" v-model="form.gravel4" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="骨料5" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="gravel5Name">
                    <el-select v-model="form.gravel5Name" placeholder="骨料5名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltGravelColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="gravel5">
                    <el-input-number placeholder="骨料5占比" :max="100" v-model="form.gravel5" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="骨料6" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="gravel6Name">
                    <el-select v-model="form.gravel6Name" placeholder="骨料6名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltGravelColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="gravel6">
                    <el-input-number placeholder="骨料6占比" :max="100" v-model="form.gravel6" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="粉料1" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="powder1Name">
                    <el-select v-model="form.powder1Name" placeholder="粉料1名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltPowerColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="powder1">
                    <el-input-number placeholder="粉料1占比" :max="100" v-model="form.powder1" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="粉料2" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="powder2Name">
                    <el-select v-model="form.powder2Name" placeholder="粉料2名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltPowerColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="powder2">
                    <el-input-number placeholder="粉料2占比" :max="100" v-model="form.powder2" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="粉料3" required class="form-item-out">
                <el-col :span="11">
                  <el-form-item label-width="0px" prop="powder3Name">
                    <el-select v-model="form.powder3Name" placeholder="粉料3名称" :popper-append-to-body="false">
                      <el-option v-for="(item, index) of asphaltPowerColdDictList" :key="index" :value="item.label"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="10">
                  <el-form-item label-width="0px" prop="powder3">
                    <el-input-number placeholder="粉料3占比" :max="100" v-model="form.powder3" :controls="false" :min="0"
                      :precision="2"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="木质纤维" prop="woodFiber">
                <el-col :span="22">
                  <el-input-number placeholder="木质纤维" ::max="100" v-model="form.woodFiber" :controls="false" :min="0"
                    :precision="2"></el-input-number>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="沥青" prop="asphalt">
                <el-col :span="22">
                  <el-input-number placeholder="沥青" :max="100" v-model="form.asphalt" :controls="false" :min="0"
                    :precision="2"></el-input-number>
                </el-col>
                <el-col :span="2" class="colSplit">%</el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button size="mini" @click="doClose">取消</el-button>
        <el-button type="primary" size="mini" @click="doSubmit" :loading="submitting"> 确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCold,
  saveCold,
} from "@/api/bitumenMixingStation/matchingManage/screenTest";
import constant from "@/api/waterStability/producedData/constant";

export default {
  name: 'AsphaltMatchConfigColdEdit',
  data() {
    return {
      visible: false,
      isAdd: true,
      submitting: true,
      loading: true,
      form: {},
      rules: {
        gravel1Name: [{ required: true, message: '请输入骨料名称', trigger: 'change' }],
        gravel1: [{ required: true, message: '请输入骨料占比', trigger: 'change' }],
        gravel2Name: [{ required: true, message: '请输入骨料名称', trigger: 'change' }],
        gravel2: [{ required: true, message: '请输入骨料占比', trigger: 'change' }],
        gravel3Name: [{ required: true, message: '请输入骨料名称', trigger: 'change' }],
        gravel3: [{ required: true, message: '请输入骨料占比', trigger: 'change' }],
        gravel4Name: [{ required: true, message: '请输入骨料名称', trigger: 'change' }],
        gravel4: [{ required: true, message: '请输入骨料占比', trigger: 'change' }],
        gravel5Name: [{ required: true, message: '请输入骨料名称', trigger: 'change' }],
        gravel5: [{ required: true, message: '请输入骨料占比', trigger: 'change' }],
        gravel6Name: [{ required: true, message: '请输入骨料名称', trigger: 'change' }],
        gravel6: [{ required: true, message: '请输入骨料占比', trigger: 'change' }],
        powder1Name: [{ required: true, message: '请输入粉料1名称', trigger: 'change' }],
        powder1: [{ required: true, message: '请输入粉料1占比', trigger: 'change' }],
        powder2Name: [{ required: true, message: '请输入粉料2名称', trigger: 'change' }],
        powder2: [{ required: true, message: '请输入粉料2占比', trigger: 'change' }],
        powder3Name: [{ required: true, message: '请输入粉料3名称', trigger: 'change' }],
        powder3: [{ required: true, message: '请输入粉料3占比', trigger: 'change' }],
        recycledMaterial: [{ required: true, message: '请输入再生料占比', trigger: 'change' }],
        woodFiber: [{ required: true, message: '请输入木质纤维占比', trigger: 'change' }],
        asphalt: [{ required: true, message: '请输入沥青占比', trigger: 'change' }]
      },
      matchId: undefined,
      asphaltGravelColdDictList: constant.asphaltGravelColdDictList,
      asphaltPowerColdDictList: constant.asphaltPowerColdDictList
    };
  },
  mounted() { },
  methods: {
    init(obj) {
      this.visible = true;
      this.loading = false;
      this.submitting = false;
      this.matchId = obj.id;
      this.form = {
        id: this.matchId
      };

      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate();

        getCold(this.matchId)
          .then((res) => {
            if (!!res.data) {
              this.form = res.data;
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },

    /**
     * 关闭弹窗
     */
    doClose() {
      this.visible = false;
    },

    /**
     * 表单提交
     */
    doSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.submitting = true;
          saveCold(this.form)
            .then((res) => {
              this.submitting = false;
              this.$message.success('操作成功');
              this.doClose();
              this.$emit('success');
            })
            .catch(() => {
              this.submitting = false;
            });
        }
      });
    }
  }
};
</script>

<style scoped>
.myForm>>>.el-input-number {
  width: 100%;
}

.myForm>>>.el-input__inner {
  text-align: left;
}

.myForm>>>.el-input-number {
  width: 100%;
}
.myForm>>>.el-input__inner {
  text-align: left;
}

.form-item-out {
  margin-bottom: 0px;
}

.colSplit {
  text-align: center;
  font-size: 16px;
}

.el-col {
  border: 1px solid transparent;
}
</style>